<template>
    <header>
        <div>
            <h1 style="margin-top: -10px;color:#425049;font-size:30px"></h1>
        </div>
        <div class="opt-wrapper">
            <el-dropdown :hide-on-click="false"></el-dropdown>
            <div class="demo-basic--circle">
                <div class="block">
                        <el-avatar :size="40" :sre="avatar" :class="['avatar-info']">
                        </el-avatar>
                </div>
            </div>
            <el-dropdown-menu slot="dropdown" style="margin-top: -30px;margin-left: -40px;">
                <el-dropdown-item ><i class="el-icon-info"></i>geenzhongxin</el-dropdown-item>
                <el-dropdown-item ><i class="el-icon-switch-button"></i>tuichu</el-dropdown-item>
            </el-dropdown-menu>
        </div>
         
    </header>

    <!-- <div styl="display:flex;">
        <div style="width: 200px;">tou</div>
        <div style="flex:1"></div>
        <div style="width: 200px;">huan</div>
    </div> -->
</template>

<script>
    export default{
        name: "Header",
        data(){
            return{
                avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            }
        }
    }
</script>

<style scoped>
    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }
    .avatar-info{
        margin-top: 10px;
        margin-right: 40px;
        cursor: pointer;
    }
</style>

<!-- https://blog.csdn.net/dkm123456/article/details/124209103 -->
<!--  -->